<!DOCTYPE html>

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>购物车</title>
      <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
      <script src="/javascripts/vue@3.0.11.js" ></script>
  </head>
  <body>

    <div id="app">
        <cart nickname="宏弘"></cart>
        <cart nickname="佳琦"></cart>
    </div>

    <script>

        const app = Vue.createApp( { } );

        // 1、定义组件
        const CartItem = {
            props: [ 'name' , 'price' , 'number' ],
            template: `<div class="row">
                            <span class="col-3">{{name}}</span>
                            <span class="col-3">{{price}}</span>
                            <span class="col-3">{{number}}</span>
                            <span class="col-3">{{price * number}}</span>
                       </div>`
        }

        const Cart = {
            props: [ 'nickname' ] ,
            data(){
                return {
                    product: { name: '张仙姑画的符' , price: 1.99 , number: 100 }
                }
            },
            template: `<div class="container">
                            <h3>{{nickname}}的购物车</h3>
                            <cart-item v-bind="product"></cart-item>
                       </div>`
        }

        // 注册组件(全局注册)
        app.component( 'CartItem' , CartItem );
        app.component( 'Cart' , Cart );

        app.mount( '#app' );
    </script>

  </body>
</html>